import React from 'react';
import upperFirst from 'lodash/upperFirst';
import { Icon, Divider, Tooltip } from 'antd';
import { Command, constants, Toolbar } from 'gg-editor';
import styles from './dialogCommand.less';

import IconFont from '../common/IconFont';

const { EditorCommand } = constants;
// const IconFont = Icon.createFromIconfontCN({
//   scriptUrl: '/static/fonts/font_1518433_oa5sw7ezue.js',
// });

const MIND_COMMAND_LIST = [
  EditorCommand.Undo,
  EditorCommand.Redo,
  '|',
  EditorCommand.Copy,
  EditorCommand.Paste,
  EditorCommand.Remove,
  '|',
  EditorCommand.ZoomIn,
  EditorCommand.ZoomOut,
];

const DialogCommand = props => {
  return (
    <div className={styles.toolbar}>
      {/*{MIND_COMMAND_LIST.map((name, index) => {*/}
      {/*  if (name === '|') {*/}
      {/*    return <Divider key={index} type="vertical" />;*/}
      {/*  }*/}
      {/*  return (*/}
      {/*    <Command*/}
      {/*      key={name}*/}
      {/*      name={name}*/}
      {/*      className={styles.command}*/}
      {/*      disabledClassName={styles.commandDisabled}*/}
      {/*    >*/}
      {/*      <Tooltip title={upperFirst(name)}>*/}
      {/*        <IconFont type={`icon-${name}`} />*/}
      {/*      </Tooltip>*/}
      {/*    </Command>*/}
      {/*  );*/}
      {/*})}*/}

      <Command
        key={'undo'}
        name={'undo'}
        className={styles.command}
        disabledClassName={styles.commandDisabled}
      >
        <Tooltip title={'撤销'}>
          <IconFont type={`icon-undo`} />
        </Tooltip>
      </Command>

      <Command
        key={'redo'}
        name={'redo'}
        className={styles.command}
        disabledClassName={styles.commandDisabled}
      >
        <Tooltip title={'返回'}>
          <IconFont type={`icon-redo`} />
        </Tooltip>
      </Command>
      <Divider type="vertical" />
      <Command
        key={'zoomIn'}
        name={'zoomIn'}
        className={styles.command}
        disabledClassName={styles.commandDisabled}
      >
        <Tooltip title={'放大'}>
          <IconFont type={`icon-fangda`} />
        </Tooltip>
      </Command>
      <Command
        key={'zoomOut'}
        name={'zoomOut'}
        className={styles.command}
        disabledClassName={styles.commandDisabled}
      >
        <Tooltip title={'缩小'}>
          <IconFont type={`icon-suoxiao`} />
        </Tooltip>
      </Command>
      <Divider type="vertical" />
      <span className={styles.command} onClick={props?.fitView}>
        <Tooltip title={upperFirst('fitView')}>
          <Icon type="apartment" style={{ cursor: 'pointer' }} />
        </Tooltip>
      </span>
      <Divider key="10" type="vertical" />
      <span className={styles.command} onClick={props?.fullScreen}>
        <Tooltip title={upperFirst(props.isFullScreen ? 'export' : 'fullScreen')}>
          <Icon type={props.isFullScreen ? 'export' : 'select'} style={{ cursor: 'pointer' }} />
        </Tooltip>
      </span>
      <span className={styles.baogao} onClick={() => props.openPage('charts')}>
        <IconFont type="icon-baogao" style={{ marginRight: 5 }} />
        训练准确率报告
      </span>
      <span className={styles.setting} onClick={() => props.openPage('golbalSet')}>
        <IconFont type="icon-setting" style={{ marginRight: 5 }} />
        全局设置
      </span>
    </div>
  );
};

export default DialogCommand;
